import React, { Component } from 'react';
import UEditor from '@/components/UEditor';
import TheButton from "@/components/TheButton";
import TheTable from "@/components/TheTable";
import ThePagination from "@/components/ThePagination";
import { Modal, Form, Input, Button, Space, Select } from 'antd'
import { apiPrescriptionPage, apiPrescriptionSave, apiPrescriptionUpdate, apiPrescriptionDel } from '@/request/activityManager/index'
export default class feedChuFang extends Component {
    constructor() {
        super()
        this.UERef = React.createRef()
        this.addFormRef = React.createRef()
        this.state = {
            companyIntro: '',
            isModalVisible: false,
            prescriptionTxt: '',
            columns: [
                {
                    title: "活动名称",
                    dataIndex: "medicineName",
                    key: "medicineName",
                }, {
                    title: "ID",
                    dataIndex: "prescriptionId",
                    key: "prescriptionId",
                },
                {
                    title: "类型",
                    dataIndex: "prescriptionType",
                    key: "prescriptionType",
                    render: (text, render) => {
                        const str = text == 0 ? '狗' : text == 1 ? '猫' : '异宠'
                        return str
                    }

                }, {
                    title: "操作",
                    dataIndex: "serviceShowFile",
                    key: "serviceShowFile",
                    fixed: 'right',
                    render: (text, render) => {
                        return <div>
                            <TheButton haspermi={['activityManager:feedChuFang:edit']} onClick={() => this.edit(render)}>编辑</TheButton>
                            <TheButton haspermi={['activityManager:feedChuFang:del']} onClick={() => this.del(render)}>删除</TheButton>
                        </div>
                    }
                }],
            dataSource: [],
            total: 0,
            pageNo: 1,
            pageSize: 10
        }
    }
    componentDidMount() {
        this.getData()
    }
    getData(values) {
        let { pageNo, pageSize } = this.state
        apiPrescriptionPage({
            current: pageNo, size: pageSize,
        }).then(res => {
            if (res.code === 0) {
                this.setState({
                    dataSource: res.data,
                    total: res.totalCount,
                })
            }
        })
    }
    pageChange = (pageNo, pageSize) => {
        this.setState({
            pageNo,
            pageSize
        }, () => {
            this.getData()
        })
    };
    edit(render) {
        this.setState({
            isModalVisible: true,
            prescriptionTxt: render.prescriptionTxt,
        }, () => {
            this.addFormRef && this.addFormRef.current.setFieldsValue({
                prescriptionTxt: render.prescriptionTxt,
                medicineName: render.medicineName,
                prescriptionType: render.prescriptionType,
                prescriptionId: render.prescriptionId
            })
        })
    }
    del(render) {
        React.$confirm({
            title: "您确认删除活动吗？",
            onOk: async () => {
                apiPrescriptionDel({ id: render.prescriptionId }).then(res => {
                    React.$message({
                        type: 'success',
                        content: res.codeMessage,
                    })
                    this.setState({
                        pageNo: 1,
                    }, () => {
                        this.getData()
                    })
                })
            },
        });

    }
    contentChange = (prescriptionTxt) => {
        this.addFormRef.current.setFieldsValue({
            prescriptionTxt
        })
    }
    handleOk = () => {
        this.addFormRef.current.validateFields().then(async values => {
            console.log(values);
            let res = ''
            if (values.prescriptionId === undefined) {
                res = await apiPrescriptionSave({ ...values })
            } else {
                res = await apiPrescriptionUpdate({ ...values })
            }
            if (res.code == 0) {
                this.handleCancel()
                React.$message({
                    type: 'success',
                    content: res.codeMessage,

                })
                this.setState({
                    pageNo: 1,
                }, () => {
                    this.getData()
                })
            }

        })

    }
    handleCancel = () => {
        this.setState({
            isModalVisible: false
        })
    }
    handleAdd = () => {
        this.setState({
            isModalVisible: true,
            prescriptionTxt: '',
            prescriptionId: null
        })
    }
  
    
    render() {
        const { columns, dataSource, isModalVisible, prescriptionTxt, pageNo, pageSize, total } = this.state
        return (
            <div className="p-layout-box commodity-examine">
                <div style={{ marginBottom: 20 }}>
                    <TheButton  haspermi={['activityManager:feedChuFang:add']}  type='primary' onClick={this.handleAdd}>新增</TheButton>
                </div>
                <TheTable
                    scroll={{ x: "max-content", y: '63vh' }}
                    columns={columns}
                    dataSource={dataSource}
                />
                <ThePagination
                    pageNo={pageNo}
                    pageSize={pageSize}
                    total={total}
                    pageChange={this.pageChange}
                />
                {
                    isModalVisible &&
                    <Modal width={1000} title="图片上传" maskClosable={false} visible={isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel}>
                        <Form
                            labelCol={{
                                span: 2,
                            }}
                            wrapperCol={{
                                span: 22,
                            }}
                            ref={this.addFormRef}
                        >
                            <Form.Item
                                label="活动名称"
                                name="medicineName"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入!',
                                    },
                                ]}
                            >
                                <Input maxLength={30} />
                            </Form.Item>
                            <Form.Item
                                label="类型"
                                name="prescriptionType"
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择!',
                                    },
                                ]}
                            >
                                <Select style={{ width: 300 }}
                                    options={[
                                        {
                                            value: 1,
                                            label: '猫',
                                        },
                                        {
                                            value: 0,
                                            label: '狗',
                                        }
                                    ]}
                                />
                            </Form.Item>
                            <Form.Item
                                label="内容"
                                name="prescriptionTxt"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入!',
                                    },
                                ]}
                            >
                                <UEditor id="companyProfile" content={prescriptionTxt} initialFrameHeight={500} ref={this.UERef} contentChange={this.contentChange} />
                            </Form.Item>
                            <Form.Item
                                noStyle
                                name="prescriptionId"

                            >
                                <Input type="text" hidden />
                            </Form.Item>
                        </Form>
                    </Modal>
                }

            </div>
        );
    }
}
